<template>
  <div class="login-page">
    <div class="login-container">
      <div class="form-container">
        <div class="logo-section">
          <img src="../../assets/img/huda.png" alt="Logo" class="logo">
          <h1>欢迎来到狐大游戏平台</h1>
          <p class="subtitle">登录您的游戏账户，开始精彩游戏之旅</p>
        </div>

        <form @submit.prevent="handleLogin" class="form-base">
          <div class="form-group">
            <label for="email" class="form-label">邮箱地址</label>
            <div class="input-wrapper">
              <i class="icon">📧</i>
              <input
                  type="email"
                  id="email"
                  v-model="email"
                  placeholder="请输入您的邮箱地址"
                  required
                  class="form-input"
              >
            </div>
          </div>

          <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <div class="input-wrapper">
              <i class="icon">🔒</i>
              <input
                  type="password"
                  id="password"
                  v-model="password"
                  placeholder="请输入您的密码"
                  required
                  class="form-input"
              >
            </div>
          </div>

          <div class="form-options">
            <label class="checkbox-wrapper">
              <input type="checkbox" v-model="remember" class="checkbox">
              <span class="checkmark"></span>
              记住我
            </label>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>

          <!-- 协议勾选 -->
          <div class="form-group agreement-group">
            <label class="checkbox-wrapper">
              <input type="checkbox" v-model="agreed" class="checkbox" required>
              <span class="checkmark"></span>
              <span>
                我已阅读并同意
                <a href="#" class="terms-link" target="_blank">《用户服务协议》</a>
                和
                <a href="#" class="terms-link" target="_blank">《隐私政策》</a>
              </span>
            </label>
          </div>

          <button type="submit" class="login-btn" :disabled="!agreed || isLoading">
            <span v-if="!isLoading">立即登录</span>
            <span v-else class="loading">登录中...</span>
          </button>
        </form>

        <div class="divider">
          <span>还没有账户？</span>
        </div>

        <button @click="goToRegister" class="register-link-btn">
          立即注册游戏账户
        </button>
      </div>



      <div class="image-container">
        <div class="welcome-text">
          <h2>开启游戏新世界</h2>
          <p>登录即可享受：</p>
          <div class="features">
            <div class="feature-item">
              <span class="feature-icon">🎮</span>
              <span>海量游戏资源</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">🏆</span>
              <span>竞技排行榜</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">💰</span>
              <span>大量游戏优惠</span>
            </div>
            <div class="feature-item">
              <span class="feature-icon">👥</span>
              <span>游戏社区交流</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import request from "@/utils/request.ts";

const email = ref('')
const password = ref('')
const remember = ref(false)
const agreed = ref(false)
const isLoading = ref(false)
const router = useRouter()

const handleLogin = async () => {
  if (!agreed.value) {
    alert('请先同意用户服务协议和隐私政策')
    return
  }
  isLoading.value = true
  try {
    const response = await request.post('/login', {
      email: email.value,
      password: password.value
    })

    if (response.code === 0) {
      localStorage.setItem('username', email.value)
      router.push('/')
    } else {
      alert(response.message || '邮箱或密码不正确')
    }
  } catch (e) {
    // 错误已经被拦截器统一处理过 ElMessage.error()
    console.error(e)
  } finally {
    isLoading.value = false
  }
}

const goToRegister = () => {
  router.push('/register')
}
</script>

<style>
@import '@/assets/css/login.css';
</style>